<template>
  <div class="historyOrders">
    <!-- 引入头部搜索框组件 -->
    <SearchOrderComp></SearchOrderComp>
    <div v-show="flag"
         class="search_records">
      <div class="del_icon">
        <span>历史记录</span>
        <span>
          <van-icon name="delete-o"
                    @click="delAll" />
        </span>
      </div>
      <div class="list"
           v-for="item in historyList"
           :key="item">
        <div class="list_item">{{item}}</div>
      </div>
    </div>
    <!-- 当查询出来的结果为空时展示 -->
    <div v-if="data.length='0'"
         v-show="!flag">
      <van-empty image="search"
                 description="没有相关订单信息哦~" />
    </div>

    <!-- 查询出来的订单数据 -->
    <div v-if="data.length!='0'"
         v-show="!flag">
      <!-- 【订单】 -->
      <div class="goodsList">
        <!-- 交易快照 商品信息demo -->
        <div class="goodsItem"
             v-for="item in goodsList"
             :key="item.num">
          <div class="pic_words">
            <!-- 左边图片 -->
            <div class="goodsItem_left">
              <img src=""
                   alt="">
            </div>
            <!-- 右边信息 -->
            <div class="goodsItem_right">
              <div class="goodsTitle">{{item.title}}</div>
              <div class="weight_price">
                <div>{{item.weight}}</div>
                <div>{{item.num}}</div>
              </div>
            </div>
          </div>
          <!-- 查看详情按钮 -->
          <div class="btn">
            <button class="photoBtn"
                    @click="goodsDetails">查看详情</button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import SearchOrderComp from '../../components/OrdersComponents/SearchOrderComp.vue'
export default {
  data () {
    return {
      flag: true,//历史记录显示
      data: [],
      historyList: ['香菇鸡块', '乌龙奶茶', '这个商品的名称很长很长', '极品上汤白菜', '煎蛋面', '番茄鸡蛋面'],
      goodsList: [
        {
          title: '香辣鸡块汉堡包',
          weight: '125P',
          num: '1'
        },
        {
          title: '香辣鸡块汉堡包',
          weight: '125P',
          num: '2'
        }
      ],
    }
  },
  created () {
    this.getSearchValue()
  },
  components: {
    SearchOrderComp
  },
  methods: {
    delAll () {
      this.historyList = ''
    },
    // 发送请求 this.$bus.on('定义名称' val=>{}) 
    getSearchValue () {
      this.$bus.$on('searchValue', (val) => {
        this.flag = false
        // 调用发送请求的函数
        console.log(val)
      })
    },
    // 点击查看详情
    goodsDetails () {
      this.$router.push('/goodsDetails')
    }
  }
}
</script>
<style scoped lang="scss">
.historyOrders {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
}

.search_records {
  margin-top: 15px;
  padding: 10px;
  background-color: #fff;
}

.del_icon {
  display: flex;
  justify-content: space-between;
}
.del_icon span {
  display: inline-block;
}
.list {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  // grid-template-columns: 1fr 1fr;
}
.list_item {
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 搜索结果订单样式
.goodsList {
  margin: 15px;
  background-color: #fff;
}
.goodsTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goodsItem {
  padding: 0px 10px;
  margin-top: 15px;
  border-bottom: 1px solid rgb(234, 232, 232);
}
.pic_words {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.goodsItem_left {
  width: 20%;
}
.goodsItem_right {
  width: 75%;
}
.goodsItem_left img {
  width: 60px;
  height: 60px;
  border: 1px solid rgb(195, 193, 193);
}
.goodsTitle,
.weight_price {
  height: 30px;
  line-height: 30px;
}
.weight_price {
  display: flex;
  justify-content: space-between;
}
.btn {
  width: 100%;
  height: 40px;
}
.photoBtn {
  height: 30px;
  line-height: 30px;
  width: 80px;
  color: rgb(56, 56, 56);
  background-color: #fff;
  border: rgb(188, 186, 186) 1px solid;
  border-radius: 15px;
  display: inline-block;
  float: right;
}
</style>